<template>
	<view class="container">
		<view class="header flex-space-b" @click="$navigator('/pages/home/coupon')">
			<view class="cont flex-align">
				<view class="icon flex-center">
					<u-icon name="coupon-fill" color="#fff"></u-icon>
				</view>
				<text>更多優惠活動</text>
			</view>
			<u-icon name="arrow-right" color="#666"></u-icon>
		</view>
		<view v-if="listData.length" class="coupon-list">
			<view v-for="(item, index) in listData" :key="index" class="coupon-item" :class="{ disabled : item.status > 0 }">
				<image class="coupon-bg" :src="$getOSSImg('coupon_bg.png')" mode="aspectFill" />
				<view class="left">
					<view class="price"><text>{{ item.contents }}</text></view>
				</view>
				<view class="cont">
					<view class="name">{{ item.claim }}</view>
					<view class="desc">編碼：{{ item.id }}</view>
					<view class="bottom">
						<view class="desc-list">
							<view class="desc-item flex-align">
								<text>起：{{ item.startTime }}</text>
							</view>
							<view class="desc-item flex-align">
								<text>止：{{ item.endTime }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="btn" :class="{ cur : item.status === 0 }">
					{{ item.status ? '已使用' : '待使用' }}
				</view>
			</view>
		</view>
		<view v-else class="empty-box">
			<u-empty mode="coupon" text="暫無優惠" />
		</view>
	</view>
</template>

<script>
	import { getMyCoupon } from '@/api/user'
	export default {
		data() {
			return {
				listData: []
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			async getList() {
				const { data } = await getMyCoupon()
				this.listData = data
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #f1f1f1;
		min-height: 100vh;
		padding-top: 20rpx;
		box-sizing: border-box;
	}
	.header {
		margin: 0 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		box-sizing: border-box;
		.cont {
			.icon {
				width: 50rpx;
				height: 50rpx;
				background-color: #E9930A;
				border-radius: 50%;
				margin-right: 10rpx;
			}
			text {
				font-size: 28rpx;
				color: #666;
			}
		}
	}
	.coupon-list {
		width: 100%;
		padding: 25rpx 20rpx 0;
		box-sizing: border-box;

		.coupon-bg {
			width: 100%;
			height: 194rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
		}

		.coupon-item {
			width: 100%;
			height: 194rpx;
			position: relative;
			display: flex;
			align-items: center;
			padding-right: 25rpx;
			box-sizing: border-box;
			overflow: hidden;
			margin-bottom: 25rpx;

			&.disabled {
				filter: grayscale(100%);
				opacity: .7;
			}
		}

		.left {
			width: 176rpx;
			height: 194rpx;
			position: relative;
			z-index: 2;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			flex-shrink: 0;

			.price {
				color: #E9930A;
				font-size: 26rpx;

				text {
					padding-left: 4rpx;
					font-weight: bold;
					font-size: 56rpx;
				}
			}

			.type {
				font-size: 22rpx;
				font-weight: bold;
				color: #2C2C2C;
			}

		}

		.cont {
			flex: 1;
			height: 194rpx;
			position: relative;
			z-index: 2;
			margin-left: 24rpx;
			box-sizing: border-box;
			overflow: hidden;


			.name {
				width: 100%;
				font-size: 28rpx;
				color: #5A5A5A;
				margin-top: 25rpx;
				margin-bottom: 6rpx;
			}

			.desc {
				color: #919191;
				font-size: 22rpx;
			}

			.bottom {
				position: absolute;
				left: 0;
				bottom: 25rpx;
				width: 100%;
			}

			.desc-list {
				.desc-item {
					font-size: 22rpx;
					font-weight: 400;
					color: #848383;
				}
			}
		}

		.btn {
			position: relative;
			z-index: 99;
			text-align: center;
			width: 102rpx;
			line-height: 50rpx;
			border-radius: 25rpx;
			font-size: 24rpx;
			color: #fff;
			background-color: #BFBFBF;

			&.cur {
				background-color: #E9930A;
			}
		}
	}

	/deep/ .empty-box .u-empty {
		height: 70vh;
	}
</style>